<template>
  <div class="model_index">
    <div class="model-tree" style="padding-bottom:10;padding-top:10">
      <el-dialog v-show="innerVisible" :visible.sync="innerVisible" :close-on-click-modal="false" :modal-append-to-body="false" @close="closeMode">
      <el-card shadow="never" class="model-tree-left">
        <span style="font-size:14px;font-weight: 700;">组织架构</span>
        <el-tree
          ref="tree"
          class="treeitems"
          :data="departmentTreeList"
          :props="defaultProps"
          :default-expanded-keys="defaultList"
          :highlight-current="true"
          :check-on-click-node="true"
          :expand-on-click-node="false"
          default-expand-all
          node-key="id"
          style="margin-top: 10px;"
          :current-node-key="currentNodekey"
          @node-click="handleNodeClick"
        />
      </el-card>
      <div class="model-tree-right">
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar :refresh="{ query: getList1 }"></vxe-toolbar>
          <vxe-table
            ref="xTree"
            text-algin="center"
            border
            stripe
            resizable
            highlight-hover-row
            :loading="loading"
            :data="list"
            :auto-resize="true"
            :height="$store.getters.searchRow"
            :radio-config="{highlight:true}"
            :checkbox-config="{checkRowKeys: defaultCheckIds, checkStrictly: false}"
            @checkbox-change="selectChangeEvent"
            @checkbox-all="selectAll"
            @radio-change="radioChange"
          >
            <vxe-table-column v-if="multiSelect" type="checkbox" width="60" />
            <vxe-table-column v-else type="radio" width="60" />
            <vxe-table-column field="code" width="120" title="员工代码" />
            <vxe-table-column field="name" width="180" title="员工名称" />
            <vxe-table-column field="positionName" width="150" title="员工职务" />
            <vxe-table-column field="departmentName" width="150" title="所属部门" />
            <vxe-table-column field="mobile" width="160" title="联系手机" />
            <vxe-table-column field="genderDesc" width="80" title="性别" />
            <vxe-table-column field="email" width="250" title="个人邮箱" />
            <vxe-table-column field="remark" min-width="250" title="备注" />
            <vxe-table-column field="statusDesc" min-width="80" align="center" title="在职状态" />
          </vxe-table>
          <vxe-pager
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getList"
          />
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" v-if="multiSelect" @click="chooseMulti">确定</el-button>
        <el-button v-else type="primary" @click="radioClick">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getEffectDepartmentListTree, getEmployeePageList } from '@/api/org/organize'

export default {
  name: 'choose-employee',
  props: {
    // 弹窗显示隐藏
    innerVisible: {
      type: Boolean,
      default: false
    },
    checkIds: {
      type: Array,
      default: []
    },
    multiSelect: { // 是否多选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryParams: {
        departmentId: 0,
        pageNum: 1,
        pageSize: 20
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      currentNodekey: '',
      defaultList: [{
        id: 1
      }],
      departmentTreeList: [],
      loading: false,
      total: 0,
      list: [],
      checkList: [],
      defaultCheckIds: [],
      radioObj:{}
    }
  },
  mounted() {
    this.getDepartmentListTree()
  },
  methods: {
    getDepartmentListTree() {
      getEffectDepartmentListTree({}).then((response) => {
        this.currentNodekey = response[0].id
        this.departmentTreeList = [...response]

        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodekey)
          this.handleNodeClick({ id: this.currentNodekey })
        })
      })
    },
    handleNodeClick(data) {
      alert(JSON.stringify(data))
      this.currentNodekey = data.id
      this.queryParams.departmentId = data.id
      this.getList()
    },
    getList1() {
      this.getList()
    },
    // 重置参数
    refreshParams(queryP) {
      this.queryParams = queryP
      this.getList()
    },
    getList() {
      getEmployeePageList(this.queryParams).then(res => {
        this.total = res.total
        this.list = res.records
      })
    },
    // 全部选中
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records)
        this.defaultCheckIds.push(...e.records.map((item) => item.id))
        this.checkList = Array.from(new Set(this.checkList))
        this.defaultCheckIds = Array.from(new Set(this.defaultCheckIds))
      } else {
        const arr = this.list.map((item) => item.id)
        const arr1 = []
        this.checkList.forEach((item, index) => {
          arr.forEach((it) => {
            if (item.id === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach((item) => {
          this.checkList.splice(item, 1)
          this.defaultCheckIds.splice(item, 1)
        })
      }
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item.id === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row)
        this.defaultCheckIds.push(row.row.id)
      } else {
        this.checkList.splice(i, 1)
        this.defaultCheckIds.splice(i, 1)
      }
    },
    radioChange(row){
      this.radioObj = row.row
    },
    radioClick(){
      this.$emit('getEmployeeInfoList',this.radioObj)
    },
    chooseMulti() {
      let employeeData = {
        rowIds: this.defaultCheckIds,
        empArr: this.checkList,
        innerVisible: false
      }
      this.$emit('getEmployeeInfoList',employeeData)
    }
  }
}

</script>
<style lang="scss">
.model_index {
  .model-tree {
    display: flex;
    .model-tree-left {
      margin-right: 20px;
      min-width: 250px;
      height: 640px;
      overflow-y: auto;
      .el-tree-node.is-current > .el-tree-node__content {
        background-color: #2F8DFB !important;
        color: white;
      }
    }
    .model-tree-right {
      width: calc(100% - 280px);
    }
  }
}
</style>
